<template>
    <div class="user-list">
        <div class="content-head" style="margin-bottom: 20px;">
            <div class="sort-keys">

                <div class="tab-list">
                <div class="item" @click="keys.type = item.key ; keys.status = item.status" :class="{actived: keys.type === item.key}"
                    v-for="(item, index) in statusList">
                    {{item.text}}({{countStat[item.status] || 0}})
                </div>
                </div>

                <!-- <a-radio-group v-model="sort" buttonStyle="solid" style="margin-right:10px;">
                <a-radio-button value="time">注册时间</a-radio-button>
                <a-radio-button value="score">幸运值</a-radio-button>
                <a-radio-button value="repack">红包</a-radio-button>
                <a-radio-button value="invitee">邀请数</a-radio-button>
                </a-radio-group> -->

                <a-input
                placeholder="输入关键字"
                style="width: 180px;margin-right:10px;"
                v-model="key"
                allowClear
                @input="onSearch"
                />
                <a-button type="primary" @click="refresh" style="margin-right:10px;">刷新</a-button>
            </div>

        </div>
        <a-table
      class="table"
      :rowKey="row => row.uuid"
      :dataSource="list"
      :pagination="pagination"
      @change="onPaginationChange"
    >
      <a-table-column
        title="拥有者"
        width="20"
      >
        <template slot-scope="row">
          <div class="user" v-if="row.user">
            <img :src="row.user.headimg" alt="用户头像">
            <div>
              <div>{{ row.user.user_name }}</div>
              <div>{{row.user.phone}}</div>
            </div>
          </div>
        </template>
      </a-table-column>


      <a-table-column
        title="赏包类型"
        width="20"
      >
        <template slot-scope="row" v-if="row.type">
          <div>{{ row.type.name }}</div>
        </template>
      </a-table-column>

      <a-table-column
        title="总价值"
        key="worth"
        width="10"
      >
        <template slot-scope="row">
          <div>{{row.worth}}</div>
        </template>
      </a-table-column>

       <a-table-column
        title="来源"
        key="description"
        width="20"
      >
        <template slot-scope="row">
          <div>{{row.description}}</div>
        </template>
      </a-table-column>

      <a-table-column
        title="状态"
        width="8"
      >
        <template slot-scope="row">
          <span>{{ row.status | formatStatus }}</span>
        </template>
      </a-table-column>

      <a-table-column
        title="创建日期"
        dataIndex="created_at"
        key="created_at"
        width="15"
      >
        <template slot-scope="created_at">
          <span>{{ created_at | formatDate2 }}</span>
        </template>
      </a-table-column>

      <a-table-column title="参与记录" width="10">
        <template slot-scope="row">
          <a href="javascript:;" @click="handleEditCy(row)">参与记录</a>
        </template>
      </a-table-column>

      <a-table-column
        title="操作"
        key="action"
        width="15"
      >
        <template slot-scope="row">
          <span>
           <div>
             <a href="javascript:;" @click="handleGetPath(row)">查看路径</a>
             <a-divider type="vertical" />
             <a href="javascript:;" class="delete-text" @click="handleDelete(row)">删除</a>
           </div>   

          </span>
        </template>
      </a-table-column>
    </a-table>

    <a-modal title="参与记录" style="top: 100px;" :visible="isEditCyLog" width="1200px"
       @cancel="isEditCyLog = false" :footer="null">
       <Cylog v-if="isEditCyLog" :participant="participantArr" @cancel="isEditCyLog = false" @success="fetchData"></Cylog>
     </a-modal>

    </div>
  
  </template>
  <script>

import moment from 'moment'
import Cylog from "./components/Cylog.vue"
  
  export default {
    name: 'ScoreRedpackList',
    components: {
        Cylog
    },
    data () {
      return {
        isEditCyLog: false,
        participantArr: '',
        isEdit: false,
        statusList: [
            {
            text: '未分享',
            key: 'unused',
            status:0
            },
            {
            text: '已分享',
            key: 'in_use',
            status:1
            },
            {
            text: '已结束',
            key: 'used',
            status:2
            }
        ],
        keys: {
            type: 'unused',
            status:0
        },
        page:1,
        per_page:10,
        key:'',
        list:[],
        total:0,
        countStat:{},
      }
    },
    computed: {
      pagination() {
        return {
          defaultPageSize: this.per_page,
          defaultCurrent: this.page,
          total: this.total,
          onChange: (e) => {
            this.page = e
            this.fetchData()
          }
        }
      }
    },
    filters: {
        formatDate (value) {
          return value ? moment(value).fromNow() : ''
        },
        formatDate2 (value) {
          return value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : ''
        },
        formatStatus (value) {
            if(value == 1){
                return '已分享';
            }else if(value == 2){
                return '已结束';
            }else{
                return '未分享';
            }
        }
    },
    created () {
        this.fetchData()
    },
    watch: {
        
        keys:{
            handler(value) {
                this.refresh()
            }
            ,deep: true
        }
    },
    methods: {
      handleDelete(row) {
        this.$confirm({
          title: '提示',
          content: `确认删除吗？`,
          onOk: () => {
            this.$http.delete(`/score_redpack/${row.uuid}`).then(res => {
              this.fetchData()
            })
          }
        })
      },
        handleEditCy(row) {
            this.participantArr = row.participant
            this.isEditCyLog = true
          },
          onPaginationChange (e) {
      this.page = e.current
      this.per_page = e.pageSize
      this.fetchData()
    },
        fetchData (){
            console.log("初始化")
            const that = this
            this.$http.get('/score_redpack_total', {
              params: {
                key: this.key,
              }
            }).then(res => {
              that.countStat = res.data.info
            })
            this.$http.get(`/score_redpack`, {
                params: {
                    page: this.page,
                    per_page: this.per_page,
                    key: this.key,
                    status: this.keys.status,
                }
            }).then(res => {
                this.list = res.data.list
                this.total = res.data.item_total
                console.log(res)
            }).finally(() => {
                // this.loading = false
            })
        },
        handleGetPath (row) {
            this.$getPathPopup.show({
              page: '/pages/scoreRedPack/detail',
              param: 'uuid=' + row.uuid
            })
          },
        onSearch (e) {
            this.page = 1
            clearTimeout(this.timeout)
            this.timeout = setTimeout(() => {
                this.fetchData()
            }, 300)
        },
        refresh () {
            this.page = 1
            this.key = ''
            this.fetchData()
        },
    }
  }
  </script>
  <style lang="less" scoped>

.content-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sort-keys {
    display: flex;
    align-items: center;

    .tab-list {
      display: flex;
      margin-top: 6px;
      border-bottom: 1px solid #e1e1e1;
      margin-right: 50px;

      .item {
        margin-right: 30px;
        padding: 0px 10px 4px 10px;
        cursor: pointer;
        font-weight: 500;

        &.actived {
          color: #1890FF;
          border-bottom: 3px solid #1890FF;
        }

        &:hover {
          color: #1890FF;
        }
      }
    }

  }

  .user {
      display: flex;
      // flex-wrap: wrap;
      align-items: center;

      img {
        width: 26px;
        height: 26px;
        margin-right: 6px;
        border-radius: 50%;
        overflow: hidden;
      }
    }

  </style>
  